<script setup lang="ts">
import { getCurrentInstance, ref, reactive, onMounted } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
const { proxy } = getCurrentInstance()

/* ---- */
const userInfo = proxy.$Store.get('userInfo') || {}
const WXConfig = proxy.$Store.get('WXConfig') || {}
const forSys = proxy.$Sys || []

/* --设置微信分享功能-- */
proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
  if (!obj) return
  // ----
  obj.hideMenuItem()
})

const pageObj = {
  'qyjs':'企业介绍',
  'jxdls':'经销合作商',
  'wnfw':'为你服务',
}
const fromPage = ref("");
const setCurPageTitle = () => {
  fromPage.value = proxy.$route.query.fromPage;
  document.title = `${pageObj[fromPage.value]}分享设置`
}
setCurPageTitle()
/* ---- */
const share = reactive({
  // add: true,
  // maxnum: 1,
  forFree: 1,
  setTrueStyle: {},
  companyShareImgs: {
    add:true,
    maxnum: 1,
    pics:[]
  },
  companyImgs: {
    add:true,
    maxnum: 0,
    pics:[]
  },
  setMoreStyle:{},
  teamImgs: {
    add:true,
    maxnum: 1,
    pics:[]
  },
  imgs: {
    add:true,
    maxnum: 1,
    pics:[]
  },
  option: {
    viewMode: 0,
    dragMode: 'move',
    // aspectRatio: 1,
    autoCropArea: 1,
    center: false,
    cropBoxMovable: false,
    cropBoxResizable: false,
    toggleDragModeOnDblclick: false
  },
  cropImg: proxy.$Global.cropImg
})
// ----
let globalData = {}
const isMobile = /^(1[3456789]\d{9})$/
// ----
const form = reactive({
  id: 0,
  tabName: 'market_capital',
  // 企业介绍
  companyTitleName:'',
  companyShareName: '',
  companyShareDesc: '',
  companyShareHotline:'',
  // ----
  titleName: '',
  // teamStatus: false,
  teamShareRemark:'',
  teamShareName: '',
  teamShareDesc: '',
  // coopStatus: false,
  coopShareTitleName: '',
  coopShareName: '',
  coopShareDesc: '',
  remark: '',
  telphone: ''
})

/* ---- */
const uploadoss = ref()
const layer = ref()
const layerLoading = ref()

/* ---- */
const getFormInfo = () => {
  share.setTrueStyle = { height: `${document.querySelector('.powerBox dl dd label').clientWidth / share.forFree}px` }
  if(fromPage.value == 'qyjs'){
    share.setMoreStyle = { height: `${document.querySelector('.squareBox dl dd label').clientWidth / share.forFree}px` }
  }
  // -- 获取信息 --
  const newItems = forSys.filter((item) => { return String(item.name) === form.tabName })
  if (Number(newItems.length) === 1) {
    form.id = newItems[0].id
    proxy.$Myfun.getJsonData(newItems[0].value, (resJson) => {
      const RJData = resJson[0] || {}
      console.log('详情数据',RJData);
      
      globalData = RJData
      // --企业介绍--
      form.companyTitleName = RJData.company_title_name
      // form.teamStatus = Number(RJData.team_status) === 1
      form.companyShareHotline = RJData.company_share_hotline || ""
      form.companyShareName = RJData.company_share_title
      form.companyShareDesc = RJData.company_share_desc
      // ----
      form.titleName = RJData.title
      // form.teamStatus = Number(RJData.team_status) === 1
      form.teamShareRemark = RJData.team_share_remark || ""
      form.teamShareName = RJData.team_share_title
      form.teamShareDesc = RJData.team_share_desc
      // form.coopStatus = Number(RJData.coop_status) === 1
      form.coopShareTitleName = RJData.coop_share_title_name
      form.coopShareName = RJData.coop_share_title
      form.coopShareDesc = RJData.coop_share_desc
      form.remark = RJData.remark
      form.telphone = RJData.telphone
      // --企业介绍--
      RJData.company_share_imgs?.forEach((item) => {
        share.companyShareImgs.pics.push({
          imgName: item.name,
          imgUrl: item.image,
          imgW: item.width,
          imgH: item.height
        })
      })
      if (Number(share.companyShareImgs.pics.length) >= Number(share.companyShareImgs.maxnum) && Number(share.companyShareImgs.maxnum) > 0) share.companyShareImgs.add = !share.companyShareImgs.add
      
      RJData.company_imgs?.forEach((item) => {
        share.companyImgs.pics.push({
          imgName: item.name,
          imgUrl: item.image,
          imgW: item.width,
          imgH: item.height
        })
      })
      if (Number(share.companyImgs.pics.length) >= Number(share.companyImgs.maxnum) && Number(share.companyImgs.maxnum) > 0) share.companyImgs.add = !share.companyImgs.add
      
      RJData.team_img.forEach((item) => {
        share.teamImgs.pics.push({
          imgName: item.name,
          imgUrl: item.image,
          imgW: item.width,
          imgH: item.height
        })
      })
      if (Number(share.teamImgs.pics.length) >= Number(share.teamImgs.maxnum) && Number(share.teamImgs.maxnum) > 0) share.teamImgs.add = !share.teamImgs.add

      RJData.share_img.forEach((item) => {
        share.imgs.pics.push({
          imgName: item.name,
          imgUrl: item.image,
          imgW: item.width,
          imgH: item.height
        })
      })
      if (Number(share.imgs.pics.length) >= Number(share.imgs.maxnum) && Number(share.imgs.maxnum) > 0) share.imgs.add = !share.imgs.add
    })
  }
}
// --上传图片操作--
/**
 * 
 * @param type 操作类型 1上传2删除
 * @param selectObj 字段存储的对象
 * @param imgFields 图片存储字段
 * @param event 
 * @param index 
 */
const uploadAct = (type, selectObj,imgFields, event, index) => {
  const uploadOss = uploadoss.value
  switch (Number(type)) {
    case 1: {
      uploadOss.uploadImg({event, selectObj,imgFields, index})
      break
    }
    case 2: {
      uploadOss.delInfo(selectObj, event,imgFields)
      break
    }
    case 3: {
      uploadOss.uploadImgMoreWX(selectObj,imgFields)
      break
    }
  }
}
// ----
const emptyInfo = (event) => {
  const curEL = event.currentTarget
  const input = curEL.parentElement.querySelector('input')
  input.value = ''
  input.dispatchEvent(new Event('input'))
}
// ----
const subform = async () => {
  if ((fromPage.value == 'qyjs' && Number(form.companyTitleName.length) === 0) ||
      (fromPage.value == 'jxdls' && Number(form.titleName.length) === 0) ||
      (fromPage.value == 'wnfw' && Number(form.coopShareTitleName.length) === 0) 
  ) {
    proxy.$Myfun.forToast(layer.value, 'open', '请填写页面标题！')
    return false
  }
  if (fromPage.value == 'qyjs' && !isMobile.test(form.companyShareHotline)) {
    proxy.$Myfun.forToast(layer.value, 'open', '请填写合法的手机号！')
    return false
  }
  // 企业介绍图标
  const companyShareItems = []
  if (Number(share.companyShareImgs.pics.length) > 0) {
    share.companyShareImgs.pics.forEach((item, index) => {
      companyShareItems.push({
        name: item.imgName,
        image: item.imgUrl,
        width: item.imgW,
        height: item.imgH
      })
    })
  }
  // 图文介绍
  const companyItems = []
  if (Number(share.companyImgs.pics.length) > 0) {
    share.companyImgs.pics.forEach((item, index) => {
      companyItems.push({
        name: item.imgName,
        image: item.imgUrl,
        width: item.imgW,
        height: item.imgH
      })
    })
  }
  // 经销合作商图标
  const teamItems = []
  if (Number(share.teamImgs.pics.length) > 0) {
    share.teamImgs.pics.forEach((item, index) => {
      teamItems.push({
        name: item.imgName,
        image: item.imgUrl,
        width: item.imgW,
        height: item.imgH
      })
    })
  }
  // ----
  const shareItems = []
  if (Number(share.imgs.pics.length) > 0) {
    share.imgs.pics.forEach((item, index) => {
      shareItems.push({
        name: item.imgName,
        image: item.imgUrl,
        width: item.imgW,
        height: item.imgH
      })
    })
  }
   // --企业介绍--
  globalData.company_title_name = form.companyTitleName
  globalData.company_share_title = form.companyShareName
  globalData.company_share_desc = form.companyShareDesc
  globalData.company_share_hotline = form.companyShareHotline
  // ----
  globalData.title = form.titleName
  // globalData.team_status = form.teamStatus ? 1 : 0
  globalData.team_share_title = form.teamShareName
  globalData.team_share_desc = form.teamShareDesc
  globalData.team_share_remark = form.teamShareRemark
  // globalData.coop_status = form.coopStatus ? 1 : 0
  globalData.coop_share_title_name = form.coopShareTitleName
  globalData.coop_share_title = form.coopShareName
  globalData.coop_share_desc = form.coopShareDesc
  globalData.share_img = shareItems
  globalData.team_img = teamItems
  globalData.company_share_imgs = companyShareItems
  globalData.company_imgs = companyItems
  globalData.remark = form.remark
  globalData.telphone = form.telphone
  // ----
  const forValue = JSON.stringify(globalData)
  // ----
  let forType = 'post'
  let forUrl = 'system/create'
  let forData = {
    name: form.tabName,
    value: forValue,
    // ----
    config_id: userInfo.config_id,
    openid: userInfo.openid
  }
  if (Number(form.id) > 0) {
    forType = 'patch'
    forUrl = 'system/update?id=' + form.id
    forData = {
      value: forValue,
      // ----
      config_id: userInfo.config_id,
      openid: userInfo.openid
    }
  }
  // ----
  proxy.$Myfun.onLoading(layerLoading.value, 'open', proxy.$Global.loadingMsg)
  let resData = ''
  await proxy.$http[forType](forUrl, forData).then((res) => { resData = res }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  // ----
  proxy.$Myfun.disLoading(layerLoading.value, 'close')
  if (resData) proxy.$router.back()
}
const goback = () => { proxy.$router.back() }

/* ---- */
onMounted(() => {
  getFormInfo()
})
onBeforeRouteLeave(() => { proxy.$Myfun.setScrollTop(proxy.$refs.formSection) })
</script>

<template>
  <div class="mescroll-touch" ref="formSection">
    <div class="formSet">
      <!-- 企业介绍 -->
      <ul v-if="fromPage == 'qyjs'">
        <li>
          <div class="form-are xw-radius-3">
            <h1>网页标题</h1>
            <p><textarea class="tarea-H2" placeholder="" v-model.trim="form.companyTitleName"></textarea></p>
          </div>
        </li>
        <li>
          <div class="form-are xw-radius-3">
            <h1>分享标题</h1>
            <p><textarea class="tarea-H2" placeholder="" v-model.trim="form.companyShareName"></textarea></p>
          </div>
        </li>
        <li>
          <div class="form-are xw-radius-3">
            <h1>分享描述</h1>
            <p><textarea class="tarea-H3" placeholder="" v-model.trim="form.companyShareDesc"></textarea></p>
          </div>
        </li>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>咨询电话</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="请填写咨询电话" v-model.trim="form.companyShareHotline"/></p>
          </div>
        </li>
        <li>
          <div class="form-imgs xw-radius-3 powerBox">
            <div class="FIS-top xw-flex xw-flex-align xw-flex-justify">
              <span class="FIS-title">分享图标</span>
            </div>
            <dl class="FIS-img">
              <dd v-for="(item, index) in share.companyShareImgs.pics"><label class="xw-block xw-act"><img :src="item.imgUrl"/><input type="file" style="display: none;" accept="image/*" @change="uploadAct(1, share,'companyShareImgs', $event, index)"/></label><span class="FIS-del fal fa-times xw-act" @click="uploadAct(2, share,'companyShareImgs', index)"></span></dd>
              <dd v-if="share.companyShareImgs.add"><label class="xw-act xw-flex xw-flex-center" :style="share.setTrueStyle"><em class="fal fa-plus"></em><input type="file" style="display: none;" accept="image/*" @change="uploadAct(3, share,'companyShareImgs', $event)"/></label></dd>
            </dl>
          </div>
        </li>
        <li>
          <div class="form-imgs xw-radius-3 squareBox">
            <div class="FIS-top xw-flex xw-flex-align xw-flex-justify">
              <span class="FIS-title">图文介绍</span>
              <span v-if="Number(share.companyImgs.maxnum) > 0">数量：最多{{share.companyImgs.maxnum}}张</span>
            </div>
            <dl class="FIS-img xw-float">
              <dd class="xw-float-W3" v-for="(item, index) in share.companyImgs.pics"><label class="xw-block xw-act" :style="share.setMoreStyle"><div class="xw-bgImg" :style="{ backgroundImage: 'url(' + item.imgUrl + ')' }"></div><input type="file" style="display: none;" accept="image/*" @change="uploadAct(1, share,'companyImgs', $event, index)"/></label><span class="FIS-del fal fa-times xw-act" @click="uploadAct(2, share,'companyImgs', index)"></span></dd>
              <dd class="xw-float-W3" v-if="share.companyImgs.add"><label class="xw-act xw-flex xw-flex-center" :style="share.setMoreStyle" @click="uploadAct(3, share,'companyImgs')"><em class="fal fa-plus"></em></label></dd>
            </dl>
          </div>
        </li>
      </ul>

      <!-- 经销合作商 -->
      <ul v-if="fromPage == 'jxdls'">
        <li>
          <div class="form-are xw-radius-3">
            <h1>网页标题</h1>
            <p><textarea class="tarea-H2" placeholder="" v-model.trim="form.titleName"></textarea></p>
          </div>
        </li>
        <li>
          <div class="form-are xw-radius-3">
            <h1>分享标题</h1>
            <p><textarea class="tarea-H2" placeholder="" v-model.trim="form.teamShareName"></textarea></p>
          </div>
        </li>
        <li>
          <div class="form-are xw-radius-3">
            <h1>分享描述</h1>
            <p><textarea class="tarea-H3" placeholder="" v-model.trim="form.teamShareDesc"></textarea></p>
          </div>
        </li>
        <!-- <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align xw-flex-justify">
            <i>加入经销合作商默认审核通过</i>
            <p class="uct-sel"><input type="checkbox" class="a-switch" v-model="form.teamStatus"/></p>
          </div>
        </li> -->
<!--         <li>
          <div class="form-are xw-radius-3">
            <h1>文字通知</h1>
            <p><textarea class="tarea-H3" placeholder="" v-model.trim="form.teamShareRemark"></textarea></p>
          </div>
        </li> -->
        <li>
          <div class="form-imgs xw-radius-3 powerBox">
            <div class="FIS-top xw-flex xw-flex-align xw-flex-justify">
              <span class="FIS-title">分享图标</span>
            </div>
            <dl class="FIS-img">
              <dd v-for="(item, index) in share.teamImgs.pics"><label class="xw-block xw-act"><img :src="item.imgUrl"/><input type="file" style="display: none;" accept="image/*" @change="uploadAct(1, share,'teamImgs', $event, index)"/></label><span class="FIS-del fal fa-times xw-act" @click="uploadAct(2, share,'teamImgs', index)"></span></dd>
              <dd v-if="share.teamImgs.add"><label class="xw-act xw-flex xw-flex-center" :style="share.setTrueStyle"><em class="fal fa-plus"></em><input type="file" style="display: none;" accept="image/*" @change="uploadAct(1, share,'teamImgs', $event)"/></label></dd>
            </dl>
          </div>
        </li>
      </ul>

      <!-- 为你服务 -->
      <ul v-if="fromPage == 'wnfw'">
        <li>
          <div class="form-are xw-radius-3">
            <h1>网页标题</h1>
            <p><textarea class="tarea-H2" placeholder="" v-model.trim="form.coopShareTitleName"></textarea></p>
          </div>
        </li>
        <li>
          <div class="form-are xw-radius-3">
            <h1>分享标题</h1>
            <p><textarea class="tarea-H2" placeholder="" v-model.trim="form.coopShareName"></textarea></p>
          </div>
        </li>
        <li>
          <div class="form-are xw-radius-3">
            <h1>分享描述</h1>
            <p><textarea class="tarea-H3" placeholder="" v-model.trim="form.coopShareDesc"></textarea></p>
          </div>
        </li>
        <!-- <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align xw-flex-justify">
            <i>加入为你服务默认审核通过</i>
            <p class="uct-sel"><input type="checkbox" class="a-switch" v-model="form.coopStatus"/></p>
          </div>
        </li> -->
        <li>
          <div class="form-are xw-radius-3">
            <h1>文字通知</h1>
            <p><textarea class="tarea-H3" placeholder="" v-model.trim="form.remark"></textarea></p>
          </div>
        </li>
        <!-- <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>咨询电话</i>
            <p class="xw-flex-W1"><input class="text" placeholder="" v-model.trim="form.telphone"/></p>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.telphone"></em></transition>
          </div>
        </li> -->
        <li>
          <div class="form-imgs xw-radius-3 powerBox">
            <div class="FIS-top xw-flex xw-flex-align xw-flex-justify">
              <span class="FIS-title">分享图标</span>
            </div>
            <dl class="FIS-img">
              <dd v-for="(item, index) in share.imgs.pics"><label class="xw-block xw-act"><img :src="item.imgUrl"/><input type="file" style="display: none;" accept="image/*" @change="uploadAct(1, share,'imgs', $event, index)"/></label><span class="FIS-del fal fa-times xw-act" @click="uploadAct(2, share,'imgs', index)"></span></dd>
              <dd v-if="share.imgs.add"><label class="xw-act xw-flex xw-flex-center" :style="share.setTrueStyle"><em class="fal fa-plus"></em><input type="file" style="display: none;" accept="image/*" @change="uploadAct(3, share,'imgs', $event)"/></label></dd>
            </dl>
          </div>
        </li>
      </ul>
      <div class="form-sub xw-radius-3 xw-bgCL-11 xw-act" @click="subform">确定提交</div>
      <div class="form-sub xw-radius-3 xw-WhiteRed xw-act" @click="goback">取消返回</div>
    </div>
    <uploadoss-moreField ref="uploadoss"/>
    <layer-view ref="layer"/>
    <layer-view ref="layerLoading"/>
  </div>
</template>

<style scoped>
/* ---- */
.uct-sel { height: 3rem; overflow: visible; }
</style>